<!--  -->
<template>
    <div v-show="isShow">
        <el-dialog :title="dialogTitle" :visible.sync="editVisible" width="60%">
            <!-- <div class="handle-box">
                查询条件：
                <el-input class="handle-input mr10" size="mini" v-model="queryData.text01"></el-input>
                <el-select
                    v-model="queryData.address"
                    size="mini"
                    placeholder="地址"
                    class="handle-select mr10"
                >
                    <el-option key="1" label="广东省" value="广东省"></el-option>
                    <el-option key="2" label="湖南省" value="湖南省"></el-option>
                </el-select>
                <el-input
                    v-model="queryData.text02"
                    size="mini"
                    placeholder="用户名"
                    class="handle-input mr10"
                ></el-input>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>-->
            <div class="tree-box flex">
                <el-tree 
                    class="treelist"
                    :data="data" 
                    :props="defaultProps" 
                    @node-click="handleNodeClick" 
                    default-expand-all>

                </el-tree>
                
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import appMain from '../../utils/app_main.js';
var _ = require('lodash');
export default {
    props: {
        isShow: false,
        dialogTitle: ''
    },
    data() {
        return {
            editVisible: false,
            queryData: {
                text01: '',
                address: '',
                text02: ''
            },
            currentRow: '',
            //树数据
            data: [],
            defaultProps: {
                children: 'child',
                label: 'name'
            },
        };
    },
    methods: {
     
        handleSearch() {
            // getTree()
        },
        // 获取树的数据
        getTree() {
            //发送请求获取树数据
            appMain
                .clientTypeTypeTree()
                .then(res => {
                    if (res.data.code === 20000) {
                        // this.tree = res.data;
                        //this.data = appMain.dealTree(res.data.data);
                        this.data = res.data.data;
                    } else {
                        this.$message.error('服务器繁忙，请稍后再试');
                    }
                })
                .catch(err => {
                    console.log(err);
                });
        },
        // 树元素点击事件
        handleNodeClick(e) {
            this.tableDataIndex = '';
            this.currentRow = e;
            console.log(e, 'treeItem');
        },
        
      
        close() {
            this.$emit('close', {
                showDialog: false
            });
        },
        // 从弹窗返回主页面的数据
        saveEdit() {
            //let item = this.tableDataIndex === '' ? {} : this.tableData[this.tableDataIndex];
            this.$emit('edit', { backData: this.currentRow, showDialog: false });
        }
    },
    watch: {
        isShow: function(newVal, oldVal) {
            //console.log(newVal, 'newVal');
            if (newVal == true) {
                this.editVisible = true;
                this.getTree();
            } else {
                this.editVisible = false;
            }
        },
        editVisible: function(newVal) {
            if (!newVal) {
                this.$emit('close', {
                    showDialog: newVal
                })
            }
        }
    },
    computed: {
        aNum() {
            return 123;
        }
    },
    created() {}
};
</script>
<style>
.treelist {
    width: 300px;
}
.treelist .el-tree-node:focus>.el-tree-node__content {
    background-color: #409EFF !important;
    color: #fff;
    }     
</style>
<style lang="css" scoped>
.el-dialog__body {
    padding: 0 20px 30px;
}
.handle-input {
    width: 120px;
    display: inline-block;
}
.handle-select {
    width: 120px;
}
.tree-box {
    border: 1px solid #ddd;
    margin-top: 20px;
    min-height: 300px;
}
.flex-left {
    width: 200px;
    border-right: 1px solid #ddd;
}
.flex-right {
    flex: 1;
}
.el-scrollbar .el-scrollbar__wrap {
    overflow-x: hidden;
}
.el-tree > .el-tree-node {
    height: 300px;
    min-width: 100%;
    display: inline-block;
}

</style>